<template>
  <component is="a-drawer" v-model:visible="visible" width="65%" :title="title" :footer="false">
    <!-- 表单信息 start -->

    <a-descriptions :column="2" bordered>
      <a-descriptions-item :span="2" label="头像">
        <a-avatar :size="64" :image-url="formData.avatar" shape="square"></a-avatar>
      </a-descriptions-item>
      <a-descriptions-item label="用户余额"
        ><span class="text-red-500">￥{{ formData.balance1 }}</span></a-descriptions-item
      >
      <a-descriptions-item label="用户冻结"
        ><span class="text-red-500">￥{{ formData.balance2 }}</span></a-descriptions-item
      >
      <a-descriptions-item label="用户红包"
        ><span class="text-red-500">￥{{ formData.balance3 }}</span></a-descriptions-item
      >
    </a-descriptions>

    <a-tabs default-active-key="1" class="mt-4">
      <a-tab-pane key="1" title="用户信息">
        <a-divider orientation="left">基本信息</a-divider>
        <a-descriptions :column="3" class="p-4" :value-style="{ width: '33.3%' }">
          <a-descriptions-item label="用户ID">{{ formData.id }}</a-descriptions-item>
          <a-descriptions-item label="昵称">{{ formData.nickname }}</a-descriptions-item>
          <a-descriptions-item label="姓名">{{ formData.username }}</a-descriptions-item>
          <a-descriptions-item label="手机">{{ formData.phone || '--' }}</a-descriptions-item>
          <a-descriptions-item label="是否为店员">{{ formData.is_assistant == 1 ? '是' : '否' }}</a-descriptions-item>
          <a-descriptions-item label="红包发放">{{ formData.is_red == 1 ? '开启' : '关闭' }}</a-descriptions-item>
          <a-descriptions-item label="是否禁用">{{ formData.status == 1 ? '否' : '已禁用' }}</a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="2" :title="identityTypes[formData.identity_id||0]">
        <div>
          <a-table :columns="orderColumn" :data="orderData.data" :pagination="false">
            <template #avatar="{ record }">
              <div style="display: flex;align-items: center;">
                <a-avatar :size="48" :image-url="record.avatar" shape="square"></a-avatar>
                <div style="margin-left:10px;font-size: 12px;color: #666;">
                  <div>用户ID:{{ record.id }}</div>
                  <div>用户昵称:{{ record.nickname }}</div>
                  <div>手机号:{{ record.phone || '--' }}</div>
                </div>
              </div>
            </template>
            <template #created_at="{ record }">
              {{ record.created_at }}
            </template>
            <template #operation="{ record }">
              <a-space>
                <a-popconfirm
                content="确定要切换上级吗?"
                position="bottom"
                @ok="handleEdit(record)"
               >
                 <a-button type="primary" size="small">确认切换</a-button>
              </a-popconfirm>
              </a-space>
            </template>
          </a-table>
        </div>
        <div class="mt-2 text-right" v-if="orderData.total > 0">
          <a-pagination
            :total="orderData.total"
            show-total
            show-jumper
            show-page-size
            @change="orderChangeHandler"
            @page-size-change="pageSizeChangeHandler"
            v-model:current="billParams['page']"
            :page-size="billParams['limit']"
            style="display: inline-flex" />
        </div>
      </a-tab-pane>
      <a-tab-pane v-if="formData.identity_id==2" key="3" title="审核方式">
        <div>
          <a-form ref="formRef" :model="shenheData" :auto-label-width="true">
            <a-col :span="24">
              <a-form-item label="团员是否审核" field="is_register_auto">
                <sa-radio v-model="shenheData.is_register_auto" :options="data_is_shenhe" />
              </a-form-item>
            </a-col>
          </a-form>
          <a-button type="primary" @click="submit" style="margin-left: 100px;width: 100px;">保存</a-button>
        </div>
        
      </a-tab-pane>
      <!-- <a-tab-pane key="3" title="余额变动">
        <div>
          <a-table :columns="billColumn" :data="billData.data" :pagination="false">
            <template #status="{ record }">
              <sa-dict :value="record.status" dict="app_pay_status"></sa-dict>
            </template>
            <template #type="{ record }">
              <sa-dict :value="record.type" dict="app_bill_type"></sa-dict>
            </template>
          </a-table>
        </div>
        <div class="mt-2 text-right" v-if="billData.total > 0">
          <a-pagination
            :total="billData.total"
            show-total
            @change="billChangeHandler"
            v-model:current="billParams['page']"
            :page-size="billParams['limit']"
            style="display: inline-flex" />
        </div>
      </a-tab-pane> -->
    </a-tabs>

    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import api from '@/api/user'
import { Message } from '@arco-design/web-vue'
const emit = defineEmits(['success'])
// 引用定义
const visible = ref(false)

let title = computed(() => {
  return '用户详情'
})

// 添加身份类型数组，对应索引 0: 空, 1: 切换团长, 2: 切换代理, 3: 切换招商
const identityTypes = ['', '切换团长', '切换代理', '切换招商']
const migration_type = ['','community','agent','attract']
// 表单信息
const formData = ref({})

const shenheData = ref({
  is_register_auto:  1,
  uuid: '',
  type:5
})

const billParams = ref({
  page: 1,
  limit:10,
})

const data_is_shenhe = [
  { label: '人工审核', value: 1 },
  { label: '自动审核', value: 2 },
]

const orderData = reactive({
  total: 0,
  data: [],
})
const orderColumn = reactive([
  { title: '头像', slotName: 'avatar', width: 100 },
  { title: '注册时间', slotName: 'created_at', width: 120 },
  { title: '操作', slotName: 'operation', width: 120, fixed: 'right' },
])

// 打开弹框
const open = async (data) => {
  visible.value = true
  await initPage(data)
}

// 初始化页面数据
const initPage = async (data) => {
  formData.value = data
  shenheData.value.is_register_auto = formData.value.is_register_auto || 1
  shenheData.value.uuid = formData.value.id
  loadBillData()
  // loadBillData()
}
const loadBillData = async () => {
  billParams.value.identity_id = formData.value.identity_id+1
  const resp = await api.identityList(billParams.value)
  orderData.data = resp.data.list
  orderData.total = resp.data.total_count
  console.log('loadBillData', orderData)

}

const submit = async () => {
  
  const data = {
    ...shenheData.value,
  }
  const response = await api.Operation(data)
  Message.success(response.message)
  emit('success')
}


const orderChangeHandler = async (currentPage) => {
  billParams.value['page'] = currentPage
  await loadBillData()
}

// 每页数量变化
const pageSizeChangeHandler = async (pageSize) => {
  billParams.value['page'] = 1
  billParams.value['limit'] = pageSize
  await loadBillData()
}



const handleEdit = async (record) => {
  const data = {
    uuid: formData.value.id,
    migration_type: migration_type[formData.value.identity_id],
    migration_uuid: record.id,
  }
  await api.identityUpdate(data)
  visible.value = false
  emit('success')
}




defineExpose({ open })
</script>
